<template>
	<view>
		<sin-barrage :list="list" :bottom="bottom" :left="left" :color="color" :background="background" :opacity="0.7" :rows="row"
		 :msec="msec" :flag="flag"></sin-barrage>
		<view class="dishimage">
			<u-image :src="currentdish.imgurl" width="100%" height="600"><u-loading slot="loading"></u-loading></u-image>
		</view>
		<view class="detail">
			<view>{{currentdish.name}}</view>
			<view style="display: flex;justify-content: space-between;"><span>销量：{{currentdish.salecount}}</span><span>好评率:{{currentdish.salecount!=0?((currentdish.goodnum/currentdish.salecount)*100).toFixed(1):0}}%</span></view>
			<view>
				<view>
					<text v-if="currentdish.rowprice!=currentdish.nowprice" style="text-decoration: line-through;">￥{{ currentdish.rowprice }}</text>
					<text class="price-l fw700 fs26">￥{{ currentdish.nowprice }}</text></view>
				<image src="../../static/ic_add@2x.png" @click="handleSelect(currentdish, $event)"></image>
			</view>
		</view>
		<view class="intro">
			<view>菜品简介</view>
			<view>{{currentdish.introduction?currentdish.introduction:'暂无'}}</view>

		</view>
		<!--  -->
		<!-- 悬浮购物车 -->
		<view v-show="!infoVisible==true" :class="['dishes-info', { 'dishes-info-zIndex': infoVisible&&!show }]" style="position: fixed;bottom: 10rpx;">
			<view>
				<text>￥</text>
				<text>{{ orderData.money }}</text>
			</view>
			<view @click="handleSubmit">提交订单</view>
			<view @click="handlePopup">
				<text v-if="orderData.count > 0">{{ orderData.count }}</text>
				<image src="../../static/ic_order@2x.png"></image>
			</view>
		</view>
		<!-- end -->
		<!-- 弹出框 -->
		<popup :isVisible.sync="infoVisible">
			<view class="dishes-detail">
				<view>
					<text @click="selectdesk(tabledetail.tablenumber)">{{tabledetail.tablenumber||'请选择桌号'}}</text>
					<template>
						<!-- <u-select v-model="show" :list="list" :safe-area-inset-bottom="true" @confirm="confirm"></u-select> -->
						<!-- <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"></u-picker> -->
					</template>
					<view>
						<image src="../../static/ic_clear@2x.png"></image>
						<text @click="CLEAN_DISHES">清空购物车</text>
					</view>
				</view>
				<view class="dishes">
					<view v-for="(item, index) in orderList" :key="index">
						<image :src="item.imgurl"></image>
						<view>
							<text>{{ item.name }}</text>
							<view>{{ item.type }}</view>
							<view>
								<text>￥</text>
								<text>{{ item.nowprice }}</text>
							</view>
						</view>
						<view>
							<text @click="handleDel(item)">-</text>
							<text>{{ item.count }}</text>
							<image src="../../static/ic_add@2x.png" @click="handleAdd(item)"></image>
						</view>
					</view>
				</view>
			</view>
		</popup>
		<!-- end
		 <!-- 添加菜品 -->
		<popup position="center" width="600rpx" borderRadius="10rpx" :isVisible.sync="typeVisible">
			<view class="orderDishes-type">
				<view v-if="selectDishes">
					<u-image :src="selectDishes.imgurl" width="190" height="125" :border-radius="10"></u-image>
					<view>
						<view>{{ selectDishes.name }}</view>
						<view>￥{{ selectDishes.nowprice }}</view>
					</view>
				</view>
				<checkBox ref="box" v-for="(item, index) in typeList" :key="index" :data="item.child" :value="type[index]" :title="item.name"
				 name="value" id="value"></checkBox>
				 <text v-if="typeList.length==0">该菜品暂无规格可选</text>
			</view>
			<view class="orderDishes-add" @click="handleAdd(false)">加入购物车</view>
		</popup>
		<!-- 贝塞尔曲线 -->
		<view :class="['pAnimate',pAnimate]" ref="pAnimate">
			<image :class="cAnimate" ref="cAnimate" src="../../static/ic_add@2x.png" style="width: 30rpx;height:30rpx;" />
		</view>
	</view>
</template>

<script>
	import popup from '../../components/popup.vue';
	import checkBox from '../../components/checkBox.vue';
	import sinBarrage from '@/components/sin-barrage/sin-barrage.vue'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {
			sinBarrage,
			popup,
			checkBox
		},
		data() {
			return {
				flag:true,
				row:1,
				id:'',
				currentdish: {},
				selectorObj: [{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				desknumber: '',
				show: false,
				// list: [{
				// 		value: '1',
				// 		label: '1号桌'
				// 	},
				// 	{
				// 		value: '2',
				// 		label: '2号桌'
				// 	}
				// ],
				goId: null,
				value: null,
				sHeight: null,
				pAnimate: null,
				cAnimate: null,
				selectDishes: null,
				infoVisible: false,
				typeVisible: false,
				type: [],
				typeList: [{
					"id": 1,
					"name": "规格",
					"level": 1,
					"child": [{
						"id": 12,
						"name": "辣度",
						"level": 2,
						"child": [{
							"id": 15,
							"name": "变态辣",
							"level": 3,
							"child": []
						}, {
							"id": 14,
							"name": "中辣",
							"level": 3,
							"child": []
						}, {
							"id": 13,
							"name": "微辣",
							"level": 3,
							"child": []
						}]
					}, {
						"id": 8,
						"name": "口味",
						"level": 2,
						"child": [{
							"id": 11,
							"name": "椒盐",
							"level": 3,
							"child": []
						}, {
							"id": 10,
							"name": "孜然",
							"level": 3,
							"child": []
						}, {
							"id": 9,
							"name": "蒜香",
							"level": 3,
							"child": []
						}]
					}, {
						"id": 5,
						"name": "分量",
						"level": 2,
						"child": [{
							"id": 7,
							"name": "小份",
							"level": 3,
							"child": []
						}, {
							"id": 6,
							"name": "大份",
							"level": 3,
							"child": []
						}]
					}]
				}],
				// 	{
				// 	key: 'size',
				// 	title: '规格',
				// 	data: [
				// 		{
				// 			id: 1,
				// 			value: '大份'
				// 		},
				// 		{
				// 			id: 2,
				// 			value: '小份'
				// 		}
				// 	]
				// }, {
				// 	key: 'taste',
				// 	title: '口味',
				// 	data: [{
				// 			id: 1,
				// 			value: '蒜香'
				// 		},
				// 		{
				// 			id: 2,
				// 			value: '孜然'
				// 		},
				// 		{
				// 			id: 3,
				// 			value: '椒盐'
				// 		}
				// 	]
				// }, {
				// 	key: 'hot',
				// 	title: '辣度',
				// 	data: [{
				// 			id: 1,
				// 			value: '微辣'
				// 		},
				// 		{
				// 			id: 2,
				// 			value: '中辣'
				// 		},
				// 		{
				// 			id: 3,
				// 			value: '大辣'
				// 		}
				// 	]
				// },
				list: [
				// 	{
				// 	id: 1,
				// 	image: "http://thirdwx.qlogo.cn/mmopen/vi_32/ZU1C66ckT0O8GUrhQXWV6Bak4T1e23ZDBbYNH65t1so8QUI4EzibUtPenyX2CmPOcO4p1x38ophZ3ZtTPc5yjlw/132",
				// 	text: '张三刚刚点了此菜品'
				// }, {
				// 	id: 2,
				// 	image: "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTII4gjVwfYnnn08OYnQvNx6Azhd6WLAX2lRdEjy0u5VnWMlLkFdno9MiaY9RMX539IibpFCcNklk9Xw/132",
				// 	text: '张三刚刚点了此菜品'
				// }, {
				// 	id: 3,
				// 	image: "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKxu6TyMBhVsj8kC6uDAicXGNuZczpiaVUsk7Wh1ianReX1ne8TGGEDVymfm4UicS21FXUQzUibV5HyP8Q/132",
				// 	text: '王五刚刚点了此菜品'
				// }, {
				// 	id: 4,
				// 	image: "http://thirdwx.qlogo.cn/mmopen/vi_32/pyOZXTibxo7HOonF8yjTCicY7pA0onoHNh5V2pic6qibB7MeF5hMSBFr6SdAbmjaKZ4XMt5pQiabwSicviaiarLicBEYkyg/132",
				// 	text: '赵六刚刚点了此菜品'
				// }, {
				// 	id: 5,
				// 	image: "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLY9xp1nsR6qcJoiaacjlzhQY8OndsvaVS2yd6s8OtWkkzvGk2wpibQNxbyrH4rYIJljO1Vg0ZmgbkA/132",
				// 	text: '钱七刚刚点了此菜品'
				// },
				],
				bottom: 120,
				left: 35,
				color: '#FFFFFF',
				background: '#000000',
				msec: 2000

			}
		},
		created() {
			this.$u.post('/order/getUserBuyInfo',{id:this.id}).then(res=>{
				console.log(res,'获取的点餐用户');
				this.list=res.data.msg
				if(this.list.length>3){
					this.row=3
					this.flag=false
					this.flag=true
					console.log('dayusah');
				}else{
					this.row=1
						this.flag=false
						this.flag=true
						}
				})
				
		},
		onLoad(val) {
			console.log(val.id,'sdsd');
			this.id=val.id
			this.getcurrent(val.id)


		},
		computed: {
			...mapState(['orderList', 'orderData', 'tabledetail'])
		},
		methods: {
			selectdesk(val) {
				// this.show = true
				// if(!val){
				uni.navigateTo({
					url: '../index/table'
				})
				// }
			},
			getcurrent(id) {
				console.log(id, 'id');
				this.$u.post('/dishes/getdishbyid', {
					id
				}).then(res => {
					console.log(res, 'dddd');
					this.typeList=res.data.data.options[0].child
					this.currentdish = res.data.data
				})
			},
			...mapActions(['CHANGE_COUNT', 'CLEAN_DISHES']),
			confirm(e) {
				this.desknumber = e[0].label
			},
			// selectdesk() {
			// 	this.show = true
			// },
			handleSubmit() {
				if (this.orderList.length > 0) {
					if (this.tabledetail.tablenumber != undefined) {
						uni.navigateTo({
							url: '../checkorder/checkorder'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择桌位！'
						});
					}

				} else {
					uni.showToast({
						icon: 'none',
						title: '至少选一样菜哦！'
					});
				}
				this.pAnimate = null;
				this.cAnimate = null;
			},
			handleSelect(row, event) {
				this.selectDishes = row;
				this.typeVisible = true;
				console.log(this.$refs.box);
				this.$refs.box.map((item, index) => {
					this.$refs.box[index].value = '';
				});
				this.pAnimate = null;
				this.cAnimate = null;
			},
			handleDel(row) {
				this.CHANGE_COUNT({
					row: row,
					type: false
				});
			},
			handleAdd(row) {
				this.pAnimate = 'orderDishes-pAnimate';
				this.cAnimate = 'orderDishes-cAnimate';
				this.type = this.$refs.box.map((item, index) => {
					return this.$refs.box[index].value;
				});
				setTimeout(() => {
					if (!row) {
						row = {
							count: 1,
							...this.selectDishes,
							type: this.type.filter(Boolean).join('、')
						};
						console.log(row);
						this.pAnimate = null
						this.cAnimate == null
					}
					this.pAnimate = null
					this.cAnimate == null
					this.CHANGE_COUNT({
						row: row,
						type: true
					});
				}, 500);

				this.typeVisible = false;
			},
			handlePopup() {
				this.infoVisible = !this.infoVisible;
			},
			handleGoId(id) {
				this.$nextTick(() => {
					this.goId = id
				})
				setTimeout(() => {
					this.goId = null;
				}, 200);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
		width: 100%;
		height: 100%;

	}

	.detail {
		padding: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		view:nth-child(1) {
			font-size: 16px;
			font-weight: bolder;
			margin-bottom: 20rpx;
		}

		view:nth-child(2) {
			font-size: 14px;
			color: #706b6a;
			margin-bottom: 20rpx;
		}

		view:nth-child(3) {
			display: flex;
			justify-content: space-between;

			view {
				font-size: 18px;
				font-weight: bolder;
				color: red;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}


		}
	}

	.intro {
		padding: 20rpx;
		background-color: #FFFFFF;

		view:nth-child(1) {
			font-size: 16px;
			font-weight: bolder;
		}

		view:nth-child(2) {
			font-size: 14px;
			color: #706b6a;
			margin-bottom: 20rpx;
		}

	}

	.dishimage {
		width: 100%;
		height: 600rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dishes-info-zIndex {
		z-index: 1002;
		bottom: 55%;
	}

	.orderDishes {
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.dishes-operation {
		height: 100rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 16rpx;
		margin-bottom: 20rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		&>view {
			flex: 1;
			height: 100%;
			border-right: 1rpx solid #e0e0e0;
		}

		&>view:last-child {
			border: none;
		}
	}

	.dishes-list {
		&>view:nth-child(1) {
			text-align: center;
			padding-bottom: 20rpx;
		}

		&>view:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			&>view:nth-child(3n+1) {
				margin-left: 20rpx;
			}

			&>view {
				width: 31%;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				margin-right: 9rpx;
				overflow: hidden;

				&>image {
					height: 200rpx;
					// height: 100%;
					width: 100%;
				}

				&>text {
					padding: 10rpx;
				}

				&>view {
					padding: 10rpx;

					text {
						color: red;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						float: right;
					}
				}
			}
		}
	}

	.dishes-list:last-child {
		margin-bottom: 100rpx;
	}

	/deep/ .popup,
	.popup-open {
		z-index: 998;
	}

	.dishes-info {
		position: fixed;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		text-align: center;
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		transition: all 0.3s;

		&>view:nth-child(1) {
			flex: 2;
			background-color: red;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			background-color: #292323;

			text:nth-child(1) {
				font-size: 26rpx;
				padding-left: 30rpx;
			}

			text:nth-child(2) {
				font-size: 36rpx;
			}
		}

		&>view:nth-child(2) {
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			background-color: #ffc107;
			flex: 1;
		}

		&>view:nth-child(3) {
			position: absolute;
			top: -8rpx;
			left: 45rpx;
			background: orange;
			height: 90rpx;
			width: 80rpx;
			border-radius: 20px 20px 0px 0px;
			display: flex;
			align-items: center;
			justify-content: center;

			&::before {
				content: '';
				width: 90rpx;
				height: 8rpx;
				background-color: orange;
				position: absolute;
				bottom: -2rpx;
				border-radius: 40rpx;
				z-index: -1;
			}

			text {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				position: absolute;
				top: -8rpx;
				right: -4rpx;
				background-color: #f44336;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			image {
				width: 45rpx;
				height: 45rpx;
				filter: brightness(0) invert(1);
			}

			uni-image {
				filter: brightness(0) invert(1);
			}
		}
	}

	.dishes-detail {
		&>view:nth-child(1) {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ccc;
			padding: 0rpx 30rpx;

			text {
				font-size: 28rpx;
			}

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					padding-right: 4rpx;
				}
			}
		}

		.dishes {
			height: calc(50vh - 120rpx);
			overflow-y: auto;

			&>view {
				display: flex;
				padding: 25rpx 25rpx 0rpx 25rpx;
				align-items: center;

				&>image {
					width: 125rpx;
					height: 125rpx;
					border-radius: 10rpx;
					background-color: red;
					margin-right: 20rpx;
				}

				&>view:nth-child(2) {
					font-size: 30rpx;

					&>view:nth-child(2) {
						font-size: 26rpx;
						color: #ccc;
						padding: 10rpx 0rpx;
					}

					&>view:nth-child(3) {
						color: red;

						text:nth-child(1) {
							font-size: 22rpx;
						}
					}
				}

				&>view:nth-child(3) {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					&>text:nth-child(1) {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 28rpx;
						color: #000;
						border: 1px solid #e5e5e5;
					}

					&>text:nth-child(2) {
						padding: 0rpx 20rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.orderDishes-type {
		padding: 40rpx;
		max-height: calc(100% - 160rpx);
		overflow: scroll;

		&>view:nth-child(1) {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;

			image {
				width: 140rpx;
				height: 125rpx;
				border-radius: 10rpx;
			}

			&>view {
				font-size: 30rpx;
				padding-left: 20px;

				&>view:nth-child(2) {
					font-size: 26rpx;
					padding-top: 30rpx;
					color: red;
				}
			}
		}
	}

	.orderDishes-add {
		color: #ffffff;
		height: 75rpx;
		background-color: red;
		line-height: 75rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.pAnimate {
		width: 30rpx;
		height: 30rpx;
		opacity: 0;
		z-index: -1;
		position: fixed;
		left: 50%;
		bottom: 510rpx;
	}

	.orderDishes-pAnimate {
		animation: pAnimate cubic-bezier(0, 0, 0, 0) 0.5s;
	}

	.orderDishes-cAnimate {
		animation: cAnimate cubic-bezier(0.14, -1.33, 1, 0.18) 0.5s;
	}

	@keyframes pAnimate {
		from {
			opacity: 1;
			z-index: 9;
			transform: translateX(0);
		}

		to {
			opacity: 1;
			transform: translateX(-165rpx);
		}
	}

	@keyframes cAnimate {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(300rpx);
		}
	}
</style>
